<template>
  <div>
    <h1>人员名单及爱好列表</h1>
    <ul>
      <li v-for="p in person" :key="p.id">
        <h3>姓名: {{ p.name }}</h3>
        <p>
          爱好：
          <span v-for="item in p.hobby" :key="item">
            {{ item }}
          </span>
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
// import Item from './components/Item.vue';
export default {
  name: 'Item',
  data() {
    return {
      person: [
        { id: 1, name: '张三', hobby: ['听歌', '看剧', '泡妹'] },
        { id: 2, name: '李四', hobby: ['唱', '跳', '打游戏'] },
        { id: 3, name: '王五', hobby: ['打球', '逛街', '写字'] },
      ],
    };
  },
};
</script>
<style></style>
